<template>
	<el-form :inline="true" ref="refAddEvidenceForm" :model="formInlineEvi" :rules="rules" size="mini" label-width="100px">
		<el-row style="margin-bottom:8px;">
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="物品名称" prop="name">
					<el-input v-model="formInlineEvi.name" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" :xs="12" :sm="12" :md="12" :lg="12" class="mb10">
				<el-form-item label="物品类别">
					<el-select filterable v-model="formInlineEvi.class" @change="onChange" style="width: 33%" placeholder="请选择...">
						<el-option v-for="item in options.wzlbs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
					<el-select filterable v-model="formInlineEvi.category" @change="onChangeCategory" style="width: 33%" placeholder="请选择...">
						<el-option v-for="item in wzxls" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
					<el-select filterable v-model="formInlineEvi.subCategoryId" @change="onChangeSubCategory" style="width: 33%" placeholder="请选择...">
						<el-option v-for="item in wzbls" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="RFID标签" style="display:none;">
					<el-input v-model="formInlineEvi.rFID" readonly placeholder="请读取"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="数量" prop="quantity">
					<el-input-number v-model="formInlineEvi.quantity" style="width: 100%" />
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="计算单位">
					<el-select filterable allow-create v-model="formInlineEvi.unit" placeholder="请选择...">
						<el-option v-for="item in options.wzdws" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="获取方式">
					<el-select filterable v-model="formInlineEvi.extractMethod" placeholder="请选择...">
						<el-option v-for="item in options.tqffs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="14" :xs="14" :sm="14" :md="14" :lg="14" class="mb10">
				<el-form-item label="物品属性">
					<el-checkbox-group v-model="formInlineEvi.shapeLs" name="name">
						<el-checkbox label="具有财产属性" />
						<el-checkbox label="贵重物品" />
						<el-checkbox label="易损易贬值物品" />
					</el-checkbox-group>
				</el-form-item>
			</el-col> 
		</el-row>
		<el-row>
			<el-col :span="16" :xs="16" :sm="16" :md="16" :lg="16" class="mb15">
				<el-form-item label="规格型号" prop="source"> 
					<el-input v-model="formInlineEvi.source" style="width: 100%" />
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="重量">
					<el-input-number v-model="formInlineEvi.extractionOrganId" style="width:80%" />g
				</el-form-item>
			</el-col> 
		</el-row>
		<el-row>
			<el-col :span="16" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="颜色">
					<el-input v-model="formInlineEvi.extractionPersonName" style="width: 100%" />
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="成色">
					<el-input v-model="formInlineEvi.chengSe" style="width: 100%" />
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="3D模型">
					<el-input v-model="formInlineEvi.xingHao" style="width: 100%" placeholder="请输入url地址" />
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-row>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10" style="display: none;">
				<el-form-item label="获取时间" prop="extractionDateTime">
					<el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="formInlineEvi.extractionDateTime" style="width: 100%" type="date" />
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="强制措施时间" prop="caiQuChuoSiDate">
					<el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="formInlineEvi.caiQuChuoSiDate" style="width: 100%" type="datetime" />
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10">
				<el-form-item label="产地">
					<el-input v-model="formInlineEvi.extractionParts" style="width: 100%" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" class="mb10">
				<el-form-item label="物品特征" style="width: 100%; margin-top: 10px">
					<el-input v-model="formInlineEvi.describe" placeholder="请输入..."></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10" style="display: none;">
				<el-form-item label="购买日期" prop="buyDate">
					<el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="formInlineEvi.buyDate" style="width: 100%" type="date" />
				</el-form-item>
			</el-col>
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" class="mb10"  style="display: none;">
				<el-form-item label="购买价格">
					<el-input-number v-model="formInlineEvi.buyPrice" style="width: 80%" />元
				</el-form-item>
			</el-col>
			<el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" class="mb10">
				<el-form-item label="备注">
					<el-input v-model="formInlineEvi.remark" type="textarea"  placeholder="请输入..."/>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';

export default defineComponent({
	name: 'addEvi',
	props: {
		formInline: Object,
		options: Object,
	},
	setup(props) {
		const state = reactive({
			wzxls: [],
			wzbls:[]
		});
		const rules = ref({
			name: [
				{
					required: true,
					message: '请输入物名名称',
					trigger: 'change',
				},
			],quantity: [
				{
					type: 'number',
					required: true,
					message: '请输入数量',
					trigger: 'change',
				},
			],source: [
				{
					required: false,
					message: '请输入规格型号',
					trigger: 'change',
				},
			]

			 
		});
		const formInlineEvi = props.formInline;
		formInlineEvi.extractionDateTime = formInlineEvi.extractionDateTime || new Date().toISOString();
		if(formInlineEvi.shape){
			formInlineEvi.shapeLs = (formInlineEvi.shape||"").split(',')
		}else{
			formInlineEvi.shapeLs = [];
		}
		const _options:any = props.options;
		function onChange(key: any) {
			state.wzxls = [];
					state.wzbls=[];
			if (key) {
				formInlineEvi.className = _options.wzlbs.find((x) => x.value == key)?.label;
				const parentId = _options.dics.find((x) => x.code == key)?.id;
				state.wzxls = _options.dics
					.filter((x) => x.parentId == parentId)
					.map((x) => {
						return {
							label: x.name,
							value: x.id.toString()
						};
					});
				if(formInlineEvi.category){
					//二级分类
					onChangeCategory(formInlineEvi.category);
				}
				
			}
		}
		function onChangeCategory(key: any) {
			formInlineEvi.categoryName = state.wzxls.find((x) => x.value == key)?.label;
			state.wzbls = _options.dics
					.filter((x) => x.parentId == key)
					.map((x) => {
						return {
							label: x.name,
							value: x.id.toString()
						};
					});
		}
		function onChangeSubCategory(key: any) {
			formInlineEvi.subCategoryName = state.wzbls.find((x) => x.value == key)?.label;
		}
		
		onChange(formInlineEvi.class);
		const refAddEvidenceForm = ref();
		return {
			state,
			formInlineEvi,
			refAddEvidenceForm,
			onChange,
			rules,
			onChangeCategory,
			onChangeSubCategory,
			...toRefs(_options),
			...toRefs(state),
		};
	},
});
</script>
<style scoped>
.el-col {
	border: 0px solid red;
}
.el-form-item,
.el-select,
.el-date-picker {
	width: 100%;
}
</style>
